<template>
  <div>
    <div><template>
      <a-modal
        title="发布商品"
        :width="600"
        :visible="visible"
        :confirmLoading="confirmLoading"
        @ok="handleConfirm"
        @cancel="handleCancel"
        okText="确认"
        cancelText="取消"
      >
        <a-spin :spinning="confirmLoading">
          <a-form :form="form">
            <a-row :gutter="12">
              <a-col :md="24" :sm="24">
                <a-form-item
                  label="商品名称"
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol"
                >
                  <a-input  v-decorator="['goodsName', {rules: [{required: true, message: '请输入商品名字'}]}]"/>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :md="24" :sm="24">
                <a-form-item
                  label="商品数量"
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol"
                >
                  <a-input-number
                    v-decorator="['goodsNum',
                {
                  rules: [{ required: true, message: '请设置商品数量'}]
              }]"
                    :min="mn"
                  />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :md="24" :sm="24">
                <a-form-item
                  label="所属学院"
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol"
                >
                  <a-select v-decorator="['goodsUnit', {rules: [{required: true, message: '请输入商品所属学院'}]}]">
                    <a-select-option
                      :key="item.num"
                      v-for="item in options"
                    >{{item.name}}</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :md="24" :sm="24">
                <a-form-item
                  label="发布时间"
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol"
                >
                  <a-date-picker :disabledDate="disableTime"
                    v-decorator="['showTime',
                  {
                    rules: [{ required: true, message: '请设置发布时间'}]
                  }]"
                    @ok="getDataValue"
                    @change="getDataValue"
                  />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="12">
              <a-col :md="24" :sm="24">
                <a-form-item
                  label="文件上传"
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol"
                >
                  <a-upload
                    v-decorator="['file',
                {
                  rules: [{ required: true, message: '请上传文件' }]
                }]"
                    :action="url"
                    :fileList="fileList"
                    :accept="acceptType"
                    :headers="header"
                    :beforeUpload="beforeUpload"
                    @preview="handlePreview"
                    :maxCount="1"
                    @change="onChange"
                    :remove="remove"
                  >
                    <a-button size="small" type="primary">点击上传文件</a-button>
                    <!--                <span style="margin-left: 10px">仅支持jpg，png格式文件</span>-->
                  </a-upload>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :md="24" :sm="24">
                <a-form-item
                  label="商品描述"
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol"
                >
                  <a-textarea style="white-space: pre-line" cols="48" rows="10" v-decorator="['goodsDesc']" />
                </a-form-item>
              </a-col>
            </a-row>


      </a-form>

    </a-spin>
  </a-modal>
    </template></div>
    <div>
      <template>
        <a-modal
          title="验证商品"
          :width="600"
          :visible="confirmVisible"
          :confirmLoading="confirmLoading"
          @ok="handleSubmit"
          @cancel="confirmCancel"
          okText="确认新增"
          cancelText="取消"
        >
          <a-spin :spinning="confirmLoading">
            <a-form :form="form">
              <a-row :gutter="12">
                <a-col :md="24" :sm="24">
                  <a-form-item
                    label="商品名称"
                    :labelCol="labelCol"
                    :wrapperCol="wrapperCol"
                  >
                    {{goodsName}}
                  </a-form-item>
                </a-col>
              </a-row>
              <a-row :gutter="12">
                <a-col :md="24" :sm="24">
                  <a-form-item
                    label="商品数量"
                    :labelCol="labelCol"
                    :wrapperCol="wrapperCol"
                  >
                    {{goodsNum}}
                  </a-form-item>
                </a-col>
              </a-row>
              <a-row>
                <a-col :md="24" :sm="24">
                  <a-form-item
                    label="所属学院编号"
                    :labelCol="labelCol"
                    :wrapperCol="wrapperCol"
                  >
                    {{goodsUnit}}
                  </a-form-item>
                </a-col>
              </a-row>
              <a-row>
                <a-col :md="24" :sm="24">
                  <a-form-item
                    label="发布时间"
                    :labelCol="labelCol"
                    :wrapperCol="wrapperCol"
                  >
                    {{showTime}}
                  </a-form-item>
                </a-col>
              </a-row>
              <a-row>
                <a-col :md="24" :sm="24">
                  <a-form-item
                    label="商品描述"
                    :labelCol="labelCol"
                    :wrapperCol="wrapperCol"
                  >
                    <p style="white-space: pre-wrap">
                      {{goodsInfo}}
                    </p>
                  </a-form-item>
                </a-col>
              </a-row>
              <a-row :gutter="12">
                <a-col :md="24" :sm="24">
                  <a-form-item
                    label="文件预览"
                    :labelCol="labelCol"
                    :wrapperCol="wrapperCol"
                  >
                    <img style="width: 100%;" :src="previewImag"/>
                  </a-form-item>
                </a-col>
              </a-row>
            </a-form>
          </a-spin>
        </a-modal>
      </template>
    </div>
  </div>
</template>

<script>

// eslint-disable-next-line standard/object-curly-even-spacing
// import { addGoods } from '@/api/basic/goods'
import storage from 'store'
import { ACCESS_TOKEN } from '@/store/mutation-types'
import { listAll } from '@/api/basic/user'
import { addGoods, editGoods } from '@/api/basic/goods'
import {addGoodsList} from "@/api/basic/goodsList";
import moment from "moment";
import TagSelectOption from "@/components/TagSelect/TagSelectOption";

var web3
var myContractInstance

export default {
  name: 'AddGoods',
  components: {
    TagSelectOption
  },
  props: {
  },
  data () {
    return {
      url: '/api/goods/upload',
      header: {
        'Access-Token': storage.get(ACCESS_TOKEN)
      },
      acceptType: '.jpg,.jpeg,.png,.gif,.bmp,.JPG,.JPEG,.PBG,.GIF,.BMP',
      fileList: [],
      fileUrl: '',
      treeData: [],
      expandedKeys: [1],
      labelCol: {
        xs: { span: 24 },
        sm: { span: 4 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 18 }
      },
      visible: false,
      confirmLoading: false,
      persons: [],
      wjmUnitName: '',
      units: [],
      users: [],
      form: this.$form.createForm(this),
      t: -1,
      goodsName:'',
      goodsNum: '',
      showTime: '',
      goodsInfo:'',
      photoUrl:'',
      goodsUnit:'',
      previewImag:'',
      confirmVisible: false,
      num: 0,
      mn: 1,

      options:[{
        num:1, name:"计算机与数据工程学院"},{num:2, name:"信息科学与工程学院"},{num:3, name: "机械工程与能源学院"},{num:4, name:"生物工程学院"},
        {num:5, name:"材料学院"},{num:6, name:"商学院"},{num:7, name:"传媒学院"},{num:8, name:"外语学院"},
        {num:9, name:"设计学院"},{num:10, name:"土建学院"}]
    }
  },
  created () {
    listAll()
      .then(res => {
        if (res.message !== 'error') {
          this.users = res.result
        } else {
          this.$message.error('操作失败！')
        }
      })
  },
  watch:{
    visible(){
      this.fileList=[]
    }
  },
  methods: {
    add () {
      this.visible = true
    },
    handleConfirm(){
      const { form: { validateFields } } = this
      validateFields((errors, values) => {
        console.log("开始确认")
        console.log(values)
        if(values.file==null) {
          this.$message.error('请上传文件！')
        }
        else{
          this.goodsInfo=values.goodsDesc
          this.goodsName = values.goodsName
          this.previewImag = values.file.file.response.result
          this.confirmVisible = true
          this.goodsNum = values.goodsNum
          this.goodsUnit = values.goodsUnit
        }
      })
    },
    handleSubmit () {
      console.log("开始提交")
      const { form: { validateFields } } = this
      this.confirmLoading = true
      validateFields((errors, values) => {
        if (!errors) {
          if (this.ifDone) {
            values.photoUrl = this.fileUrl
            values.showTime = this.showTime+' 00:00:00'
            values.goodsUnit = this.goodsUnit
            values.creator = this.$root.userUrl
            this.num = values.goodsNum
            addGoodsList(values)
              .then(async res => {
                if (res.message !== 'error') {
                  this.visible = false
                  this.confirmVisible = false
                  this.confirmLoading = false
                  this.form.resetFields()
                  this.fileList = []
                  this.$emit('ok')
                } else {
                  this.confirmLoading = false
                  this.$message.error('操作失败！')
                }
              })
          } else {
            this.confirmLoading = false
            this.$message.warning('文件正在上传中！')
          }
        } else {
          this.confirmLoading = false
        }
      })
    },
    handleCancel () {
      this.form.resetFields()
      this.visible = false
    },
    confirmCancel(){
      this.confirmVisible = false
    },
    beforeUpload (file) {
      const fileType = file.name.substring(file.name.lastIndexOf('.') + 1)
      if (this.acceptType.indexOf(fileType) === -1) {
        this.$message.warning('仅支持pdf、图片格式文件！')
        this.uploading = true
        return false
      }
      this.fileList = [file]
    },
    handlePreview(file){
      console.log("开始预览楼")
      this.previewImag = file.url
    },
    onChange ({ file, fileList, event }) {
      this.ifDone = false
      if (file.status === 'done') {
        this.fileUrl = file.response.result
        this.ifDone = true
      }
      // console.log(this.ifDone)
    },
    remove () {
      console.log("移除")
      this.fileList = null
      return true
    },
    getDataValue (value) {
      this.showTime = moment(value).format('YYYY-MM-DD') // 转换
    },
    disableTime(current){
      return current && current < moment().startOf('day')
    }
  }
}
</script>
